import React, { useEffect, useState } from 'react'
import Container from '../Container'
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import Router from '@/utils/router'
import { fetchListGoodsByIds } from '@/server/shop'
import './index.scss'
const RenderStyle = (props) => {
    const { data = {}, } = props
    const { list = [], showComponents = 'all', showCount, top, bottom, countType, goodsNameStatus, goodsDescStatus, priceFlag, oldPriceFlag } = data
    const [renderList, setRenderList] = useState([])
    const fetchList = goodsIds => {
        fetchListGoodsByIds({
            goodsIds: goodsIds
        }).then(val => {
            const { goodsList } = val
            setRenderList(goodsList)
        })
    }
    useEffect(() => {
        if (list.length > 0) {
            fetchList(list.map(item => {
                return item.id
            }).toString())
        }
    }, [JSON.stringify(list)])
    if (countType === 'list') {
        return <View className='wxPage_shop_style1'>
            {renderList.filter((val, o) => {
                if (showComponents === 'all') {
                    return true
                }
                else {
                    if (showCount < (o + 1)) {
                        return false
                    }
                    return true
                }
            }).map(val => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.id
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={cover}></Image>
                    </View>
                    <View className='item-info'>
                        {goodsNameStatus !== 'none' && <View className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</View>}
                        {goodsDescStatus !== 'none' && <View className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</View>}
                        <View className='item-price'>
                            {priceFlag && <View style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</View>}
                            {oldPriceFlag && <View className='item-price-old'>¥{oriPrice}</View>}
                        </View>
                    </View>
                </View>
            })}
        </View>
    }
    else if (countType === 'bigImage') {
        return <View className='wxPage_shop_style2'>
            {renderList.filter((val, o) => {
                if (showComponents === 'all') {
                    return true
                }
                else {
                    if (showCount < (o + 1)) {
                        return false
                    }
                    return true
                }
            }).map(val => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.id
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={cover}></Image>
                    </View>
                    <View className='item-info'>
                        {goodsNameStatus !== 'none' && <View className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</View>}
                        {goodsDescStatus !== 'none' && <View className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</View>}
                        <View className='item-price'>
                            {priceFlag && <View style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</View>}
                            {oldPriceFlag && <View className='item-price-old'>¥{oriPrice}</View>}
                        </View>
                    </View>
                </View>
            })}
        </View>
    }
    else if (countType === 'twoList') {
        return <View className='wxPage_shop_style3'>
            {renderList.filter((val, o) => {
                if (showComponents === 'all') {
                    return true
                }
                else {
                    if (showCount < (o + 1)) {
                        return false
                    }
                    return true
                }
            }).map(val => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.id
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={cover}></Image>
                    </View>
                    <View className='item-info'>
                        {goodsNameStatus !== 'none' && <View className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</View>}
                        {goodsDescStatus !== 'none' && <View className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</View>}
                        <View className='item-price'>
                            {priceFlag && <View style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</View>}
                            {oldPriceFlag && <View className='item-price-old'>¥{oriPrice}</View>}
                        </View>
                    </View>
                </View>
            })}
        </View>
    } else if (countType === 'leftScroll') {
        return <View className='wxPage_shop_style4'>
            <View className='slide-area'>
                {renderList.filter((val, o) => {
                    if (showComponents === 'all') {
                        return true
                    }
                    else {
                        if (showCount > o) {
                            return true
                        }
                        return false
                    }
                }).map(val => {
                    const { goodsName, cover, goodsDesc, oriPrice, price } = val
                    return <View onClick={() => {
                        Router('shopDetail', {
                            args: {
                                goodsId: val.id
                            },
                        })
                    }} className='list-style-list'>
                        <View className='item-image'>
                            <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={cover}></Image>
                        </View>
                        <View className='item-info'>
                            {goodsNameStatus !== 'none' && <View className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</View>}
                            {goodsDescStatus !== 'none' && <View className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</View>}
                            <View className='item-price'>
                                {priceFlag && <View style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</View>}
                                {oldPriceFlag && <View className='item-price-old'>¥{oriPrice}</View>}
                            </View>
                        </View>
                    </View>
                })}
            </View>

        </View>
    } else if (countType === 'threeList') {
        return <View className='wxPage_shop_style5'>
            {renderList.filter((val, o) => {
                if (showComponents === 'all') {
                    return true
                }
                else {
                    if (showCount < (o + 1)) {
                        return false
                    }
                    return true
                }
            }).map((val, index) => {
                const { goodsName, cover, goodsDesc, oriPrice, price } = val
                return <View onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.id
                        },
                    })
                }} className='list-style-list'>
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={cover}></Image>
                    </View>
                    <View className='item-info'>
                        {goodsNameStatus !== 'none' && <View className={goodsNameStatus === 'one' ? 'item-info-titleOne' : 'item-info-title'}>{goodsName}</View>}
                        {goodsDescStatus !== 'none' && <View className={goodsDescStatus === 'one' ? 'item-info-descOne' : 'item-info-desc'}>{goodsDesc}</View>}
                        <View className='item-price'>
                            {priceFlag && <View style={{ color: '#ff5024' }} className=''>{price ? '¥' + price : '免费'}</View>}
                            {oldPriceFlag && <View className='item-price-old'>¥{oriPrice}</View>}
                        </View>
                    </View>
                </View>
            })}


        </View>
    } else {
        return null
    }
}

const FormRender = (props) => {
    const { data = {} } = props
    const { list = [], paddingTop = 0, paddingLeft = 0, top = 0, bottom = 0, titleFlag } = data
    console.log(data, '123')
    return <Container linkGo={() => { linkGo(data) }} hasTitle={titleFlag} {...props}>
        <View>
            <RenderStyle {...props}></RenderStyle>
        </View>
    </Container>
}
export default FormRender